<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>simple</title>
</head>

<body>
    <div id="area1">


    </div>


    <style>

    </style>
    <script>
        let leaveBills = [
            { applier: "张三", reason: "xxxx", leaveType: "病假" },
            { applier: "李四", reason: "xxxxuuu", leaveType: "年假" },
            { applier: "王五", reason: "Node.firstChild", leaveType: "年假" },
            { applier: "赵六", reason: "xxxx从", leaveType: "病假" },
            { applier: "王五", reason: "空白选项卡", leaveType: "病假" },
        ]

        // <table>
        //     <tbody>
        //         <tr>
        //             <td>zhangsan</td><td>sick</td>
        //         </tr>
        //         <tr>
        //             <td>zhangsan</td><td>sick</td>
        //         </tr>
        //         <tr>
        //             <td>zhangsan</td><td>sick</td>
        //         </tr>
        //     </tbody>
        // </table>
        let table = document.createElement("table");
        let thead = document.createElement("thead");
        let a = "请假人"
        thead.innerHTML = `<tr><th>${a}</th><th>请假原因</th><th>请假类型</th></tr>`;
        table.append(thead)
        let tbody = document.createElement("tbody")
        table.appendChild(tbody);


        for (let i = 0; i < leaveBills.length; i++) {
            let tr = document.createElement("tr");
            if (i % 2 == 0) {
                tr.style.backgroundColor = "red"
            }
            let td1 = document.createElement("td");
            td1.textContent = leaveBills[i].applier
            tr.appendChild(td1);
            let td2 = document.createElement("td");
            td2.textContent = leaveBills[i].leaveType
            tr.appendChild(td2);
            let td3 = document.createElement("td");
            td3.textContent = leaveBills[i].reason
            tr.appendChild(td3);
            tbody.appendChild(tr);
        }



        let area1 = document.querySelector("#area1")
        area1.appendChild(table)
    </script>
</body>

</html>